<!-- 业务详情 -->
<template>
  <div class="overview-detail">
    <div @back="() => $router.go(-1)">
      <a-card :bordered="false">
        <!-- 详情表单展示 start -->
        <a-row :gutter="48">
          <a-col :md="18" :sm="24">
            <a-descriptions v-if="$auth('PROJECT.BASIC_DETAIL')" :title="$t('all.autotext720')"></a-descriptions>
          </a-col>
          <!-- epv1.5 项目配置-详情不能编辑或删除 -->
          <!--<a-col :md="6" :sm="24" align="right">-->
          <!--  <a-button-->
          <!--    type="primary"-->
          <!--    style="margin-right: 8px"-->
          <!--    @click="clickEditMessage"-->
          <!--    v-if="$auth('PROJECT.PROJECT_EDIT') && isNotClosedProject"-->
          <!--  >-->
          <!--    编辑-->
          <!--  </a-button>-->
          <!--  <a-popconfirm-->
          <!--    okText="删除"-->
          <!--    cancelText="取消"-->
          <!--    :title="dynamicTitle"-->
          <!--    @confirm="deleteProject"-->
          <!--    @visibleChange="handleVisibleChange"-->
          <!--  >-->
          <!--    <a-button-->
          <!--      type="danger"-->
          <!--      v-if="$auth('PROJECT.PROJECT_DELETE') && this.detailsInfo.status != 2 && isNotClosedProject"-->
          <!--    >-->
          <!--      删除-->
          <!--    </a-button>-->
          <!--  </a-popconfirm>-->
          <!--</a-col>-->
        </a-row>
        <a-descriptions v-if="$auth('PROJECT.BASIC_DETAIL')" bordered title="">
          <!-- ******************************接口暂无数据返回先将其注释，否则影响界面展示****************************************** -->
          <a-descriptions-item :label="$t('all.autotext211')" :span="2"> {{ detailsInfo.name || '' }} </a-descriptions-item>
          <a-descriptions-item :label="$t('all.autotext345')"> {{ detailsInfo.status | enumValueByKey($const.PROJECT_STATUS) }} </a-descriptions-item>
          <a-descriptions-item :label="$t('all.autotext992')"> {{ detailsInfo.no || '' }} </a-descriptions-item>
          <a-descriptions-item :label="$t('all.autotext873')"> {{ detailsInfo.protocolNo }} </a-descriptions-item>
          <a-descriptions-item :label="$t('all.autotext1718')">{{ detailsInfo.businessCode }}</a-descriptions-item>
          <a-descriptions-item :label="$t('all.autotext1789')">{{ detailsInfo.customerName }}</a-descriptions-item>
          <a-descriptions-item :label="$t('all.autotext21')"> {{ detailsInfo.createTime | moment }} </a-descriptions-item>
          <a-descriptions-item :label="$t('all.autotext1273')">{{ detailsInfo.sponsorName }}</a-descriptions-item>
          <a-descriptions-item :label="$t('all.autotext863')"> {{ detailsInfo.stage | enumValueByKey($const.SPONSOR_STAGE) }} </a-descriptions-item>
          <!-- 最后一条 业务人员看到的是业务员，其他角色看到的是申办方PM -->
          <a-descriptions-item v-if="isYWAdmin" :label="$t('all.autotext480')"> {{ detailsInfo.businessName }} </a-descriptions-item>
          <a-descriptions-item v-else :label="$t('all.autotext435')">{{ detailsInfo.pmAccount }}</a-descriptions-item>
        </a-descriptions>
        <!-- 项目负责人 -->
        <!-- epv1.5 项目配置-负责人不能编辑或删除 -->
        <!--<a-descriptions-->
        <!--  bordered-->
        <!--  title="项目负责人"-->
        <!--  v-if="detailsInfo && detailsInfo.pmName"-->
        <!--  :style="{ margin: '20px 0' }"-->
        <!--  :column="5"-->
        <!--  layout="vertical"-->
        <!--&gt;-->
        <!--  <a-descriptions-item label="项目负责人"> {{ detailsInfo.pmAccount }} </a-descriptions-item>-->
        <!--  <a-descriptions-item label="电话/手机"> {{ detailsInfo.phone }} </a-descriptions-item>-->
        <!--  <a-descriptions-item label="邮件地址"> {{ detailsInfo.email }} </a-descriptions-item>-->
        <!--  <a-descriptions-item label="邀请状态"> {{ detailsInfo.teamStatus | enumValueByKey($const.INVITE_STATUS) }} </a-descriptions-item>-->
        <!--  <a-descriptions-item-->
        <!--    label="操作"-->
        <!--    v-if="$auth('PROJECT.PROJECT_ADMIN_DELETE') && $const.INVITE_STATUS.INVITE.value == detailsInfo.teamStatus"-->
        <!--  >-->
        <!--    <a-popconfirm-->
        <!--      okText="确定"-->
        <!--      cancelText="取消"-->
        <!--      title="确定要取消吗？"-->
        <!--      @confirm="deletePm"-->
        <!--    >-->
        <!--      <a-button :loading="removeLoading" size="small" type="danger">取消</a-button>-->
        <!--    </a-popconfirm>-->
        <!--  </a-descriptions-item>-->
        <!--  <a-descriptions-item-->
        <!--    label="操作"-->
        <!--    v-if="$auth('PROJECT.PROJECT_ADMIN_DELETE') && $const.INVITE_STATUS.COMPLETED.value == detailsInfo.teamStatus && isNotClosedProject"-->
        <!--  >-->
        <!--    <a-popconfirm-->
        <!--      okText="删除"-->
        <!--      cancelText="取消"-->
        <!--      title="确定要删除吗？"-->
        <!--      @confirm="deletePm"-->
        <!--    >-->
        <!--      <a-button :loading="removeLoading" size="small" type="danger">删除</a-button>-->
        <!--    </a-popconfirm>-->
        <!--  </a-descriptions-item>-->
        <!--</a-descriptions>-->
        <!-- 详情表单展示 end -->
        <!-- 操作按钮 start -->
        <!-- <div
          v-if="$auth('PROJECT.PROJECT_INVITE') && detailsInfo && !detailsInfo.pmName"
          class="table-operator"
          :style="{ margin: '20px 0' }"
        >
          <a-button
            type="primary"
            icon="plus"
            :disabled="$store.state.user.project.status === 3"
            @click="inviteResponderAdd()"
          >
            添加项目负责人
          </a-button>
        </div> -->
        <!-- 版本配置 -->
        <Version></Version>
      </a-card>
    </div>

    <!-- 邀请项目负责人modal -->
    <MemberModal
      ref="addMemberRef"
      :projectId="projectId"
      v-model="modalVisible"
      @invitCb="invitCb"
    />
    <!-- 新增/编辑基本信息 -->
    <AddModal
      v-model="editVisible"
      @modalOk="updateEdit"
      :isEdit="1"
      :isEditProject="true"
      :editContent="editContent"
    />
  </div>
</template>

<script>
import moment from 'moment'
import { getProjectDetail, getProjectDelete, getProjectUpdate } from '@/api/overview/contract'
// import { getApprovalDetail } from '@/api/overview/approval'
import { deleteLeader } from '@/api/overview/member'
import AddModal from '@/views/overview/allItems/AddModal'
import MemberModal from '@/components/InvitationModal/MemberModal'
import { getUnread } from '@/api/system/message'
import { mapState } from 'vuex'
import Version from './components/version'

export default {
  components: {
    AddModal,
    MemberModal,
    Version
  },
  provide () {
    return {
      detailsInfoFn: () => this.detailsInfo
    }
  },
  data () {
    const tabPaneArr = [
      {
        key: '1',
        tab: this.$t('all.autotext1131'),
        route: 'index'
      },
      {
        key: '2',
        tab: this.$t('all.autotext446')
      },
      {
        key: '3',
        tab: this.$t('all.autotext911')
      },
      {
        key: '4',
        tab: this.$t('all.autotext1286')
      },
      {
        key: '5',
        tab: this.$t('all.autotext1507')
      },
      {
        key: '6',
        tab: this.$t('all.autotext1257')
      },
      {
        key: '7',
        tab: this.$t('all.autotext599')
      }
    ]
    return {
      columns: [
        {
          title: 'ID',
          key: 'id',
          dataIndex: 'id'
        },
        {
          title: this.$t('all.autotext1150'),
          key: 'ptsNo',
          dataIndex: 'ptsNo'
        },
        {
          title: this.$t('all.autotext550'),
          key: 'applyReason',
          dataIndex: 'applyReason'
        },
        {
          title: this.$t('all.autotext867'),
          key: 'totalAmount',
          dataIndex: 'totalAmount'
        },
        {
          title: this.$t('all.autotext244'),
          key: 'createTime',
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTime' }
        },
        {
          title: this.$t('all.autotext1466'),
          key: 'status',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: this.$t('all.autotext187'),
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      detailsInfo: {}, // 详情列表
      activedKey: 1,
      tabPaneArr, // tab切换数据
      rules: {
        phone: [{ required: true, message: this.$t('all.autotext280'), trigger: 'change' }],
        user: [{ required: true, message: this.$t('all.autotext464'), trigger: 'change' }]
      },
      projectId: null,
      modalVisible: false,
      dynamicTitle: '',
      editVisible: false,
      editContent: {},
      researchApprovalInfo: {}, // 研究者审批流
      subjectApprovalInfo: {}, // 受试者审批流
      removeLoading: false,
      pId: null // 项目id 从store中获取的代替从路由中获取
    }
  },
  computed: {
    ...mapState({
      appActiveKey: state => state.app.activeKey
    }),
    isYWAdmin () {
      return this.$options.filters.isHasAuth(this.$const.ROLE_TYPE.YW_ADMIN.value)
    },
    isNotClosedProject () {
      return this.$store.state.user?.project?.status !== 3
    }
  },
  created () {
    const pro = localStorage.getItem('CURRENT_PROID')
    if (pro) {
      this.pId = parseInt(pro)
      this.$route.query.id = this.pId
    }
    if (this.$route.query.id) {
      this.pId = this.$route.query.id
    }

    getUnread({ proId: this.pId }).then(res => {
      this.$globalVue.$emit('unReadMsgCount', res)
    })
  },
  mounted () {
    this.detailsList()
    // this.initTabs()
    // this.initApproval()
  },
  methods: {
    // 获取审批流详情
    // async initApproval () {
    //   if (!this.$auth('PROJECT.PROJECT_FEE_PATIENT_COMMIT')) return
    //   this.researchApprovalInfo = await getApprovalDetail({
    //     proId: this.pId,
    //     type: 1
    //   })
    //   this.subjectApprovalInfo = await getApprovalDetail({
    //     proId: this.pId,
    //     type: 2
    //   })
    // },
    // 根据权限初始化项目管理的tabs
    // initTabs () {
    //   const arr = [
    //     this.$auth('PROJECT.PROJECT_MEMBER'),
    //     this.$auth('PROJECT.PROJECT_PATIENT'),
    //     this.$auth('PROJECT.PROJECT_VISIT'),
    //     this.$auth('PROJECT.PROJECT_REVIEW'),
    //     this.$auth('PROJECT.PROJECT_EXPENSE'),
    //     this.$auth('PROJECT.PROJECT_AGREEMENT'),
    //     this.$auth('PROJECT.PROJECT_COST')
    //   ]
    //   this.activedKey = this.appActiveKey ? this.appActiveKey : arr.findIndex(Boolean) + 1
    // },
    detailsList () {
      const datailsId = this.$route.query.id
      if (datailsId) {
        getProjectDetail({
          id: Number.parseFloat(datailsId)
        }).then(res => {
          this.detailsInfo = res
          const { protocolNo, name, status, stage, budget, no, buildTime, createrId, businessName, serviceCharge, serviceChargePercent, businessCode } = res
          const sponsorIds = res.sponsorIds?.split(',').map(Number)[0] // 注：后端返回的是个字符串需将其转为数组(split分割后是个string数组，map方法将其转为number数组)
          const contractCode = res.contractCode?.split(',')
          // todo 意义不明的解构
          this.editContent = { contractCode, protocolNo, name, sponsorIds, status, stage, budget, no, buildTime, createrId, businessName, serviceCharge, serviceChargePercent, businessCode }
          this.editContent.buildTime = moment(this.editContent.buildTime).format('YYYY-MM-DD')
        })
      }
    },
    // callback (key) {
    //   this.$store.commit('changeActiveKey', key)
    // },
    // 邀请项目负责人
    inviteResponderAdd () {
      this.modalVisible = true
      this.projectId = this.$route.query.id
      this.$refs.addMemberRef.getNewRolesList()
    },
    // 点击删除项目
    deleteProject () {
      getProjectDelete({
        id: this.$route.query.id,
        status: this.detailsInfo.status
      }).then(res => {
        this.$message.success(this.$t('all.autotext1455'))
        this.$router.push({ name: 'All' })
      })
    },
    // 判断状态是否可删除
    handleVisibleChange () {
      if (this.detailsInfo.status === 2) {
        this.dynamicTitle = this.$t('all.autotext1481')
      } else {
        this.dynamicTitle = this.$t('all.autotext1234')
      }
    },
    // 点击修改信息
    clickEditMessage () {
      this.editVisible = true
    },
    // 提交修改
    updateEdit (e) {
      const params = { ...e }
      const handleParams = () => {
        delete params.buildTime
        delete params.businessName
        // classify 1-正式 2-测试
        const { classify } = this.detailsInfo
        params.classify = classify
        params.id = this.$route.query.id
      }
      handleParams()
      getProjectUpdate(params)
        .then(res => {
          if (res.message) {
            this.$message.warning(res.message)
          } else {
            this.$message.success(this.$t('all.autotext1108'))
          }
          this.editVisible = false
          this.detailsList()
        })
    },
    cancelMember () {
      this.detailsList()
    },
    deletePm () {
      this.removeLoading = true
      deleteLeader({ id: this.detailsInfo.teamId }).then(res => {
        this.removeLoading = false
        this.detailsList()
        this.$message.success(this.$t('all.autotext470'))
      }).catch(_ => {
        this.removeLoading = false
      })
    },
    invitCb () {
      this.detailsList()
      if (this.activedKey === 1) {
        this.activedKey = 0
        setTimeout(() => {
          this.activedKey = 1
        }, 200)
      }
    },
    toConfigDetail () {
      this.$router.push({ name: 'ConfigDetail' })
    }
  }
}
</script>
<style scoped lang="scss"></style>
